<template>
  <div class="markdown-editor">
    <div class="editor-toolbar">
      <a-button-group>
        <a-button @click="insertText('### ')">标题</a-button>
        <a-button @click="insertText('**', '**')">粗体</a-button>
        <a-button @click="insertText('*', '*')">斜体</a-button>
        <a-button @click="insertText('> ')">引用</a-button>
        <a-button @click="insertText('- ')">列表</a-button>
        <a-button @click="insertText('```\n', '\n```')">代码块</a-button>
      </a-button-group>
    </div>
    <div class="editor-container">
      <div class="editor-area">
        <a-textarea
          v-model="content"
          :rows="12"
          placeholder="支持 Markdown 格式，可以使用工具栏或直接输入 Markdown 语法"
          @input="handleInput"
        />
      </div>
      <div class="preview-area">
        <div class="markdown-content" v-html="renderedContent"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { marked } from 'marked'
import DOMPurify from 'dompurify'

export default {
  name: 'MarkdownEditor',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      content: this.value
    }
  },
  computed: {
    renderedContent() {
      return DOMPurify.sanitize(marked(this.content || ''))
    }
  },
  methods: {
    handleInput() {
      this.$emit('input', this.content)
    },
    insertText(prefix, suffix = '') {
      const textarea = document.querySelector('.editor-area textarea')
      const start = textarea.selectionStart
      const end = textarea.selectionEnd
      const selected = this.content.substring(start, end)
      
      this.content = this.content.substring(0, start) +
        prefix + selected + suffix +
        this.content.substring(end)
      
      this.$nextTick(() => {
        textarea.focus()
        textarea.selectionStart = start + prefix.length
        textarea.selectionEnd = start + prefix.length + selected.length
      })
      
      this.handleInput()
    }
  }
}
</script>

<style scoped>
.markdown-editor {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.editor-toolbar {
  padding: 8px;
  border-bottom: 1px solid #d9d9d9;
  background: #fafafa;
}

.editor-container {
  display: flex;
  min-height: 300px;
}

.editor-area {
  flex: 1;
  border-right: 1px solid #d9d9d9;
}

.editor-area :deep(.ant-input) {
  border: none;
  border-radius: 0;
  resize: none;
  height: 100%;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.preview-area {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.markdown-content {
  font-size: 14px;
  line-height: 1.6;
}

.markdown-content :deep(h1),
.markdown-content :deep(h2),
.markdown-content :deep(h3) {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-content :deep(p) {
  margin-bottom: 16px;
}

.markdown-content :deep(pre) {
  margin: 16px 0;
  padding: 16px;
  background-color: #f6f8fa;
  border-radius: 6px;
  overflow: auto;
}

.markdown-content :deep(code) {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 14px;
}

.markdown-content :deep(blockquote) {
  padding: 0 16px;
  color: #6a737d;
  border-left: 4px solid #dfe2e5;
  margin: 16px 0;
}
</style> 